<template>
  <!-- 绑定参数列表 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="绑定参数列表"
    @ok="handleOk"
    destroyOnClose
    :width="780"
    @cancel="cancel"
    :footer="null"
    centered
  >
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleJumpToParam(record)"
            >查看参数</a-button
          >
          <a-button type="link" @click="handleUnbind(record)" :loading="loading"
            >解除绑定</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getParamCodeCollectDetails"
      :loading="tableLoading"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </a-modal>
</template>
<script setup>


const router = useRouter()
const $api = inject("$api")
const props = defineProps({
  paramListVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
})
const filterForm = ref({
  current: 1,
  size: 10,
})
const visible = ref(props.paramListVisible)
const emits = defineEmits([
  "update:paramListVisible",
  "getParamCodeCollectPage",
])
watch(
  () => props.paramListVisible,
  (val) => {
    visible.value = val
    if (val) {
      getParamCodeCollectDetails()
    }
  }
)
const labelCol = { style: { width: "130px" } }
const total = ref()
const tableData = ref([])
const columns = ref([
  {
    title: "参数名称",
    dataIndex: "name",
    key: "name",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "参数编码",
    dataIndex: "code",
    key: "code",
    width: 140,
    resizable: true,
    align: "center",
  },

  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 120,
    resizable: true,
    align: "center",
    fixed: "right",
  },
])
const cancel = () => {
  emits("update:paramListVisible", false)
}
const tableLoading = ref(false)
const getParamCodeCollectDetails = async () => {
  const params = {
    ...filterForm.value,
    id: props.rowData.id,
  }
  tableLoading.value = true
  const res = await $api.paramCodeCollectDetails(params)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
const loading = ref(false)
const handleUnbind = async (data) => {
  const params = {
    id: props.rowData.id, // 参数集合id
    paramCodeId: data.id, // 当前参数id
  }
  loading.value = true
  const res = await $api.paramCodeCollectRemoveParamCode(params)
  loading.value = false
  if (res && res.code === 0) {
    message.success("解除绑定成功")
    getParamCodeCollectDetails()
    emits("getParamCodeCollectPage")
  }
}
const handleJumpToParam = (data) => {
  router.push({
    path: "/SystemCenter/IOT/ParamMapping",
    query: {
      name: data.name,
    },
  })
}
</script>

<style lang="less" scoped></style>
